<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>个人博客系统-详情</title>
        <link href="../../source/bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="../../source/css/blog.css" rel="stylesheet">
        <script src="../../source/js/jquery-3.4.1.min.js"></script>
        <script src="../../../js/axios.min.js"></script>
        <script src="../../../js/vue.js"></script>
        <script src="../../source/js/view.js"></script>
        <style>
            #homeDiv{
                position: absolute;
                top: 67px;
                left: 42px;
            }
            #homeA{
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-size: 20px;
                line-height: 1.42857143;
                color: #333;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div class="data_list">
                <div class="data_list_title">
                    <i class="glyphicon glyphicon-th-large"></i> 博客信息
                </div>
                <div>
                    <div id="homeDiv">
                        <a id="homeA" href="../../index.html">首页</a>
                    </div>
                    <div class="blog_title">
                        <h3>
                            <strong>{{ blog.title }}</strong>
                        </h3>
                    </div>
                    <div class="blog_info">
                        发布时间：『<span>{{ releaseDate }}</span>』&nbsp;&nbsp;
                        博客类别：<span>{{ blogType.typeName }}</span>&nbsp;&nbsp;
                        阅读(<span>{{ blog.clickHit }}</span>)
                        评论(<span>{{ blog.replyHit }}</span>)
                    </div>
                    <div class="blog_content" id="blogContent"></div>
                    <div class="blog_keyWord">
                        <span><strong>关键字：</strong></span>
                        <span v-if="keyWords == null">
                            &nbsp;&nbsp;无关键字
                        </span>
                        <span v-else v-for="keyWord in keyWords">
                            &nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">{{ keyWord }}</a>&nbsp;&nbsp;
                        </span>

                    </div>
                    <!-- 上一篇和下一篇 -->
                    <div id="blog_lastAndNextPage"></div>
                </div>
            </div>
            <div class="data_list">
                <div class="data_list_title">
                    <i class="glyphicon glyphicon-comment"></i> 评论信息
                </div>
                <div id="commentblock">
                    <div class="form-group">
                        <!-- 隐藏域 -->
                        <input id="blogId" type="hidden" v-bind:value="blog.id">
                        <textarea style="height: 100px;" id="comment" placeholder="来说两句吧..." class="form-control"></textarea>
                    </div>
                    <div class="form-group pull-right">
                        <button id="commentBtn" type="button" @click="submitComment()" class="btn btn-success">评论</button>
                    </div>
                </div>
                <div class="commentDatas">
                    <div class="comment" v-if="comments.length == 0">
                        <div class="content text-center bg-info text-info">还没有评论，快来抢沙发吧！</div>
                    </div>
                    <div class="comment" id="comments" v-else>

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>